<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 对数据做校验的插件
    const app = Vue.createApp({
        data(){
            return{
                name:'dell',
                age:23,
            }
        },
        rules:{
            age:{
                validate:age=>age>25,
                message:'too young, to simple'
            },
            name:{
                validate:name=>name.length>=4,
                message:'name too short'
            }
        },
        template: `
        <div>name:{{name}}, age:{{age}}</div>
        `
    })
    const validatorPlugin=(app,options)=>{
        app.mixin({
            created(){
                for(let key in this.$options.rules){
                    const item = this.$options.rules[key];
                    this.$watch(key,(value)=>{
                        const rules = item.validate(value);
                        if(!result) console.log(item.message);
                    })
                }
            }
        })
    }
    app.use(validatorPlugin)
    const vm = app.mount('#root')
</script>
